<mat-sidenav-container class="demo-container">
  <mat-sidenav #start role="navigation">
    <mat-nav-list>
      <a *ngFor="let navItem of navItems"
         mat-list-item
         (click)="start.close()"
         routerLinkActive
         #routerLinkActiveInstance="routerLinkActive"
         [attr.tabindex]="routerLinkActiveInstance.isActive ? 0 : -1"
         [routerLink]="[navItem.route]">
        {{navItem.name}}
      </a>

      <hr>

      <a mat-list-item
         tabindex="-1"
         (click)="start.close()"
         [routerLink]="['/baseline']">
        Baseline
      </a>
    </mat-nav-list>
    <button mat-button tabindex="-1" (click)="start.close()">CLOSE</button>
  </mat-sidenav>
  <!--
    Note that the setup with the directionality and density is a little convoluted, but it's
    organized this way so that we can test MDC's density styles in both LTR and RTL. Their mixins
    output styles in the form of `[dir='rtl'] .density-min .foo` which means that the `dir` has to
    be one level above the density class in the DOM. At the same time, we want the density to apply
    to the toolbar while always keeping it in LTR at the same time.
   -->
  <main [attr.dir]="dir.value" [ngClass]="getDensityClass()" class="demo-main">
    <!-- The toolbar should always be in the LTR direction -->
    <mat-toolbar color="primary" dir="ltr">
      <button mat-icon-button (click)="start.open('mouse')">
        <mat-icon>menu</mat-icon>
      </button>
      <div class="demo-toolbar">
        <h1>Angular Material Demos</h1>
        <div>
          <button mat-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
            <mat-icon>fullscreen</mat-icon>
          </button>
          <button mat-button (click)="isDark = !isDark">
            {{isDark ? 'Light' : 'Dark'}} theme
          </button>
          <button mat-button (click)="rippleOptions.disabled = !rippleOptions.disabled">
            {{rippleOptions.disabled ? 'Enable' : 'Disable'}} ripples
          </button>
          <button mat-button (click)="toggleStrongFocus()">
            {{strongFocus ? 'Disable strong focus' : 'Enable strong focus'}}
          </button>
          <button mat-button (click)="dir.value = (dir.value === 'rtl' ? 'ltr' : 'rtl')"
                  title="Toggle between RTL and LTR">
            {{dir.value.toUpperCase()}}
          </button>
          <button mat-button (click)="selectNextDensity()"
                  title="Use next density scale: {{densityScales[getNextDensityIndex()]}}">
            Density scale: {{densityScales[this.currentDensityIndex]}}
          </button>
        </div>
      </div>
    </mat-toolbar>

    <div [ngClass]="getDensityClass()" class="demo-content mat-app-background">
      <ng-content></ng-content>
    </div>
  </main>
</mat-sidenav-container>
